<template>
  <div class="pagination-container">
    <div class="pagination-info">
      <span>显示 {{ startItem }}-{{ endItem }} 条，共 {{ totalItems }} 条数据</span>
      <div class="page-size-selector">
        <label>每页显示:</label>
        <select v-model.number="localPageSize" @change="handlePageSizeChange">
          <option :value="10">10条</option>
          <option :value="20">20条</option>
          <option :value="50">50条</option>
          <option :value="100">100条</option>
        </select>
      </div>
    </div>
    
    <div class="pagination-controls">
      <button 
        @click="goToPage(1)" 
        class="page-btn"
        :disabled="currentPage === 1"
        title="首页"
      >
        &laquo;
      </button>
      <button 
        @click="goToPage(currentPage - 1)" 
        class="page-btn"
        :disabled="currentPage === 1"
        title="上一页"
      >
        &lsaquo;
      </button>
      
      <!-- 页码按钮 -->
      <button 
        v-for="page in visiblePages" 
        :key="page"
        @click="goToPage(page)"
        class="page-btn"
        :class="{ active: page === currentPage }"
      >
        {{ page }}
      </button>
      <button 
        @click="goToPage(currentPage + 1)" 
        class="page-btn"
        :disabled="currentPage === totalPages"
        title="下一页"
      >
        &rsaquo;
      </button>
      <button 
        @click="goToPage(totalPages)" 
        class="page-btn"
        :disabled="currentPage === totalPages"
        title="末页"
      >
        &raquo;
      </button>
    </div>
    
    <div class="pagination-jump">
      <label>
        跳转到 
        <input 
          type="number" 
          v-model.number="jumpPage" 
          @keyup.enter="jumpToPage"
          :min="1" 
          :max="totalPages"
          class="jump-input"
        > 
        页
      </label>
      <button @click="jumpToPage" class="jump-btn">确定</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

// Props定义
const props = defineProps({
  currentPage: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  },
  totalItems: {
    type: Number,
    default: 0
  }
})

// Emits定义
const emit = defineEmits(['update:currentPage', 'update:pageSize', 'page-change', 'page-size-change'])

// 本地响应式状态
const localPageSize = ref(props.pageSize)
const jumpPage = ref(props.currentPage)

// 监听props变化，同步到本地状态
watch(() => props.currentPage, (newValue) => {
  jumpPage.value = newValue
})

watch(() => props.pageSize, (newValue) => {
  localPageSize.value = newValue
})

// 计算总页数
const totalPages = computed(() => {
  return Math.max(1, Math.ceil(props.totalItems / localPageSize.value))
})

// 计算当前页显示的起始和结束项索引
const startItem = computed(() => {
  if (props.totalItems === 0) return 0
  return (props.currentPage - 1) * localPageSize.value + 1
})

const endItem = computed(() => {
  if (props.totalItems === 0) return 0
  return Math.min(props.currentPage * localPageSize.value, props.totalItems)
})

// 计算可见页码列表
const visiblePages = computed(() => {
  const pages = []
  const total = totalPages.value
  const current = props.currentPage
  
  if (total <= 7) {
    // 如果总页数小于等于7，显示所有页码
    for (let i = 1; i <= total; i++) {
      pages.push(i)
    }
  } else {
    // 显示当前页及其前后的页码，最多显示7个页码
    let startPage = Math.max(1, current - 3)
    let endPage = Math.min(total, startPage + 6)
    
    // 调整起始页码，确保末尾有足够的页码
    if (endPage <= 6) {
      startPage = 1
      endPage = 7
    } else if (endPage - startPage < 6) {
      startPage = Math.max(1, endPage - 6)
    }
    
    for (let i = startPage; i <= endPage; i++) {
      pages.push(i)
    }
  }
  
  return pages
})

// 处理页码变化
const goToPage = (page) => {
  if (page >= 1 && page <= totalPages.value && page !== props.currentPage) {
    emit('update:currentPage', page)
    emit('page-change', page)
  }
}

// 处理页面大小变化
const handlePageSizeChange = () => {
  emit('update:pageSize', localPageSize.value)
  emit('page-size-change', localPageSize.value)
  
  // 页面大小改变时，重置到第一页
  if (props.currentPage !== 1) {
    emit('update:currentPage', 1)
    emit('page-change', 1)
  }
}

// 跳转到指定页码
const jumpToPage = () => {
  let page = parseInt(jumpPage.value)
  
  // 验证页码有效性
  if (isNaN(page)) {
    jumpPage.value = props.currentPage
    return
  }
  
  page = Math.max(1, Math.min(page, totalPages.value))
  jumpPage.value = page
  
  if (page !== props.currentPage) {
    goToPage(page)
  }
}
</script>

<style scoped>
.pagination-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.pagination-info {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14px;
}

.page-size-selector {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-size-selector select {
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}

.page-btn {
  padding: 6px 12px;
  border: 1px solid #ddd;
  background-color: white;
  color: #333;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.3s;
}

.page-btn:hover:not(:disabled) {
  background-color: #e9e9e9;
}

.page-btn.active {
  background-color: #2196F3;
  color: white;
  border-color: #2196F3;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-jump {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.jump-input {
  width: 60px;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
}

.jump-btn {
  padding: 5px 10px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.jump-btn:hover {
  background-color: #1976D2;
}

/* 深色模式下的样式 */
:global(.dark-mode) .pagination-container {
  background-color: #2d2d2d;
}

:global(.dark-mode) .pagination-info,
:global(.dark-mode) .pagination-jump {
  color: #fff;
}

:global(.dark-mode) .page-size-selector select,
:global(.dark-mode) .page-btn:not(.active),
:global(.dark-mode) .jump-input {
  background-color: #444;
  border-color: #666;
  color: #fff;
}

:global(.dark-mode) .page-btn:hover:not(:disabled):not(.active) {
  background-color: #555;
}
</style>